
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>高强度密码生成器</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        .card-gradient {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }
        .strength-weak { background-color: #f87171; }
        .strength-medium { background-color: #fbbf24; }
        .strength-strong { background-color: #4ade80; }
        .progress-transition { transition: width 0.5s ease-in-out; }
    </style>
</head>
<body class="bg-gray-100 min-h-screen">
    <div class="container mx-auto px-4 py-8 max-w-2xl">
        <div class="card-gradient text-white rounded-xl p-6 mb-8 shadow-lg">
            <h1 class="text-3xl font-bold mb-2"><i class="fas fa-lock mr-2"></i>高强度密码生成器</h1>
            <p class="opacity-90">自定义生成满足安全需求的随机密码</p>
        </div>

        <div class="bg-white rounded-xl shadow-md p-6 mb-8">
            <!-- 密码长度控制 -->
            <div class="mb-6">
                <div class="flex justify-between mb-2">
                    <label class="text-gray-700 font-medium">密码长度: <span id="lengthValue" class="text-purple-600">12</span></label>
                </div>
                <input type="range" id="lengthSlider" min="8" max="32" value="12" 
                       class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer">
            </div>

            <!-- 字符类型选项 -->
            <div class="mb-6">
                <h3 class="text-gray-700 font-medium mb-3">包含字符类型:</h3>
                <div class="grid grid-cols-2 gap-3">
                    <label class="flex items-center">
                        <input type="checkbox" id="uppercase" checked class="form-checkbox h-5 w-5 text-purple-600">
                        <span class="ml-2 text-gray-700">大写字母 (A-Z)</span>
                    </label>
                    <label class="flex items-center">
                        <input type="checkbox" id="lowercase" checked class="form-checkbox h-5 w-5 text-purple-600">
                        <span class="ml-2 text-gray-700">小写字母 (a-z)</span>
                    </label>
                    <label class="flex items-center">
                        <input type="checkbox" id="numbers" checked class="form-checkbox h-5 w-5 text-purple-600">
                        <span class="ml-2 text-gray-700">数字 (0-9)</span>
                    </label>
                    <label class="flex items-center">
                        <input type="checkbox" id="symbols" checked class="form-checkbox h-5 w-5 text-purple-600">
                        <span class="ml-2 text-gray-700">特殊符号 (!@#$%^&*)</span>
                    </label>
                </div>
            </div>

            <!-- 生成按钮 -->
            <button id="generateBtn" 
                    class="w-full bg-purple-600 hover:bg-purple-700 text-white py-3 px-4 rounded-lg font-medium transition duration-200 mb-6">
                <i class="fas fa-key mr-2"></i>生成密码
            </button>

            <!-- 密码显示区域 -->
            <div class="mb-6">
                <div class="relative">
                    <input type="text" id="passwordOutput" readonly
                           class="w-full p-4 border rounded-lg bg-gray-50 font-mono text-lg">
                    <button id="copyBtn" 
                            class="absolute right-2 top-1/2 transform -translate-y-1/2 bg-gray-200 hover:bg-gray-300 p-2 rounded-lg">
                        <i class="far fa-copy"></i>
                    </button>
                </div>
            </div>

            <!-- 密码强度检测 -->
            <div class="mb-4">
                <div class="flex justify-between mb-1">
                    <span class="text-gray-700 font-medium">密码强度:</span>
                    <span id="strengthText" class="font-medium">未检测</span>
                </div>
                <div class="w-full bg-gray-200 rounded-full h-2.5">
                    <div id="strengthBar" class="h-2.5 rounded-full progress-transition" style="width: 0%"></div>
                </div>
            </div>
        </div>

        <!-- 历史记录 -->
        <div class="bg-white rounded-xl shadow-md p-6">
            <h2 class="text-xl font-semibold mb-4 text-gray-800 border-b pb-2">
                <i class="fas fa-history mr-2 text-purple-600"></i>生成历史
            </h2>
            <div id="history" class="space-y-2 max-h-60 overflow-y-auto">
                <!-- 历史记录将在这里动态生成 -->
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // DOM元素
            const lengthSlider = document.getElementById('lengthSlider');
            const lengthValue = document.getElementById('lengthValue');
            const uppercase = document.getElementById('uppercase');
            const lowercase = document.getElementById('lowercase');
            const numbers = document.getElementById('numbers');
            const symbols = document.getElementById('symbols');
            const generateBtn = document.getElementById('generateBtn');
            const passwordOutput = document.getElementById('passwordOutput');
            const copyBtn = document.getElementById('copyBtn');
            const strengthText = document.getElementById('strengthText');
            const strengthBar = document.getElementById('strengthBar');
            const historyEl = document.getElementById('history');
            
            // 字符集
            const charSets = {
                uppercase: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ',
                lowercase: 'abcdefghijklmnopqrstuvwxyz',
                numbers: '0123456789',
                symbols: '!@#$%^&*()_+~`|}{[]:;?><,./-='
            };
            
            // 历史记录
            let history = JSON.parse(localStorage.getItem('passwordHistory')) || [];
            
            // 更新长度显示
            lengthSlider.addEventListener('input', function() {
                lengthValue.textContent = this.value;
            });
            
            // 生成密码
            generateBtn.addEventListener('click', function() {
                const length = parseInt(lengthSlider.value);
                const selectedChars = getSelectedChars();
                
                if (selectedChars.length === 0) {
                    alert('请至少选择一种字符类型！');
                    return;
                }
                
                let password = '';
                // 确保每种选中的字符类型至少出现一次
                if (uppercase.checked) password += getRandomChar(charSets.uppercase);
                if (lowercase.checked) password += getRandomChar(charSets.lowercase);
                if (numbers.checked) password += getRandomChar(charSets.numbers);
                if (symbols.checked) password += getRandomChar(charSets.symbols);
                
                // 填充剩余长度
                for (let i = password.length; i < length; i++) {
                    password += getRandomChar(selectedChars);
                }
                
                // 打乱密码顺序
                password = shuffleString(password);
                
                passwordOutput.value = password;
                checkPasswordStrength(password);
                addToHistory(password);
            });
            
            // 复制密码
            copyBtn.addEventListener('click', function() {
                if (!passwordOutput.value) return;
                
                passwordOutput.select();
                document.execCommand('copy');
                
                const originalIcon = this.innerHTML;
                this.innerHTML = '<i class="fas fa-check"></i>';
                setTimeout(() => {
                    this.innerHTML = originalIcon;
                }, 2000);
            });
            
            // 获取选中的字符集
            function getSelectedChars() {
                let chars = '';
                if (uppercase.checked) chars += charSets.uppercase;
                if (lowercase.checked) chars += charSets.lowercase;
                if (numbers.checked) chars += charSets.numbers;
                if (symbols.checked) chars += charSets.symbols;
                return chars;
            }
            
            // 随机获取字符
            function getRandomChar(charSet) {
                return charSet[Math.floor(Math.random() * charSet.length)];
            }
            
            // 打乱字符串顺序
            function shuffleString(str) {
                const arr = str.split('');
                for (let i = arr.length - 1; i > 0; i--) {
                    const j = Math.floor(Math.random() * (i + 1));
                    [arr[i], arr[j]] = [arr[j], arr[i]];
                }
                return arr.join('');
            }
            
            // 检查密码强度
            function checkPasswordStrength(password) {
                let strength = 0;
                const length = password.length;
                
                // 长度评分
                if (length >= 8) strength += 1;
                if (length >= 12) strength += 1;
                if (length >= 16) strength += 1;
                
                // 字符类型评分
                if (/[A-Z]/.test(password)) strength += 1; // 有大写字母
                if (/[a-z]/.test(password)) strength += 1; // 有小写字母
                if (/[0-9]/.test(password)) strength += 1; // 有数字
                if (/[^A-Za-z0-9]/.test(password)) strength += 1; // 有特殊字符
                
                // 更新UI
                let strengthLevel = '';
                let percentage = 0;
                
                if (strength <= 3) {
                    strengthLevel = '弱';
                    percentage = 33;
                } else if (strength <= 5) {
                    strengthLevel = '中等';
                    percentage = 66;
                } else {
                    strengthLevel = '强';
                    percentage = 100;
                }
                
                strengthText.textContent = strengthLevel;
                strengthBar.style.width = percentage + '%';
                strengthBar.className = 'h-2.5 rounded-full progress-transition strength-' + 
                    (strength <= 3 ? 'weak' : strength <= 5 ? 'medium' : 'strong');
            }
            
            // 添加到历史记录
            function addToHistory(password) {
                const historyItem = {
                    password: password,
                    time: new Date().toLocaleString(),
                    strength: strengthText.textContent
                };
                
                history.unshift(historyItem);
                if (history.length > 5) history.pop();
                
                localStorage.setItem('passwordHistory', JSON.stringify(history));
                updateHistory();
            }
            
            // 更新历史记录显示
            function updateHistory() {
                historyEl.innerHTML = '';
                
                history.forEach(item => {
                    const historyItem = document.createElement('div');
                    historyItem.className = 'bg-gray-50 p-3 rounded-lg border border-gray-200';
                    historyItem.innerHTML = `
                        <div class="flex justify-between items-center">
                            <div class="font-mono truncate flex-1 mr-2">${item.password}</div>
                            <span class="px-2 py-1 text-xs rounded-full ${
                                item.strength === '弱' ? 'bg-red-100 text-red-800' :
                                item.strength === '中等' ? 'bg-yellow-100 text-yellow-800' :
                                'bg-green-100 text-green-800'
                            }">${item.strength}</span>
                        </div>
                        <div class="text-xs text-gray-500 mt-1">${item.time}</div>
                    `;
                    historyEl.appendChild(historyItem);
                });
            }
            
            // 初始化历史记录
            updateHistory();
        });
    </script>
</body>
</html>
